<template>
    <view class="page">

        <view class="header_box">
            <back :title="'勘察员中心'" :isBg="false" :isBack="true"></back>


            <view class="header_box">
                <view class="tx_box">
                    <image class="zs_pic" @click="goSet" :src="userinfo.avatar" mode="scaleToFill" />
                </view>
                <view class="head_right_box">
                    <view class="top_head_r_b">
                        {{ userinfo.nickname }}
                    </view>
                </view>
                <view class="shezhibox" @click="goSet">
                    <image src="https://rubbish.lwjcg.com/static/order/sz.png" mode="widthFix" />
                </view>
            </view>


            <view class="wallet_box">
                <view class="dingdan_top_box">
                    <view class="left_box">我的订单</view>
                    <!-- <view class="rt_box" @click="seeAll(seeAlls)">{{ seeAlls.text }}<u-icon style="margin-left: 10rpx;"
                            name="arrow-right" color="rgba(199, 199, 199, 1)" size="24"></u-icon></view> -->
                </view>

                <view class="ddyemian_box">
                    <view class="dd_big_box" v-for="(item, index) in orderBtnList" :key="index" @click="seeAll(item)">
                        <view class="ddtop_box">
                            <image :src="item.icon" mode="scaleToFill" />
                            <view class="jiaobiao" :class="item.num.toString().length > 1 ? 'jiaobiao1_box' : ''"
                                v-if="item.num > 0">{{ item.num }}</view>
                        </view>
                        <view class="ddbot_box">{{ item.text }}</view>
                    </view>
                </view>
            </view>

            <!-- 更多服务 -->
            <view class="help_box">
                <!-- <view class="help_title_box">
					更多服务
				</view> -->

                <view class="big_gn_box">
                    <view class="gn_box" v-for="(item, index) in helpList" :key="index" @click="jump(item, index)">
                        <view class="jiaobiao" :class="monad.toString().length > 1 ? 'jiaobiao1_box' : ''"
                                v-if="monad > 0">{{ monad }}</view>
                        <view class="gn_t_box">
                            <image :src="item.img" mode="scaleToFill" />
                        </view>
                        <view class="gn_b_box">
                            {{ item.text }}
                        </view>
                    </view>
                    <view style="width: 23%;" v-for="(item) in 3"></view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            userinfo: {},
            logout: false,
            seeAlls: {
                id: -2,
                text: '查看全部',
            },
            orderBtnList: [
                {
                    id: 2,
                    icon: 'https://rubbish.lwjcg.com/static/order/dkc.png',
                    text: '待勘察',
                    num: '0',
                },
                {
                    id: 3,
                    icon: 'https://rubbish.lwjcg.com/static/order/dqy.png',
                    text: '待清运',
                    num: '0',
                },
                {
                    id: 5,
                    icon: 'https://rubbish.lwjcg.com/static/order/ywc.png',
                    text: '已完成',
                    num: '0',
                },
            ],//订单button按钮
            // 帮助列表
            helpList: [
                {
                    img: 'https://rubbish.lwjcg.com/static/order/qd.png',
                    text: '抢单中心',
                    navUrl: '/orderPage/ordercenter/ordercenter'
                },

            ],
            monad: ''

        }
    },

    onShow() {
        this.info()
        this.getsurveyStatistics()
    },
    methods: {
        info() {
            // if()
            this.$Request.post(this.$api.user.info).then(res => {
                if (res.code == 200) {
                    this.userinfo = res.data
                    this.$store.state.userInfo = res.data
                    uni.setStorageSync('user', JSON.stringify(res.data))
                }

            })
        },
        getsurveyStatistics() {
            let data = {
                survey_id: uni.getStorageSync('survey_id')
            }
            this.$Request.post(this.$api.order.surveyStatistics, data).then(res => {
                if (res.code == 200) {
                    this.monad = res.data[3]
                    this.orderBtnList.forEach((item, index) => {
                        this.orderBtnList[index].num = res.data[index]

                    });

                    console.log(this.orderBtnList)
                }
            })

        },
        goSet() {
            uni.navigateTo({
                url: '/userPage/setting/setting'
            })
        },

        // 跳转
        jump(item) {
            uni.navigateTo({
                url: item.navUrl
            })
        },
        seeAll(item) {
            console.log(item.id)
            uni.navigateTo({
                url: '/orderPage/InstituteOrder?subId=' + item.id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .header_box {
        width: 100%;
        height: 592rpx;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(231, 245, 228, 0) 100%);

        .header_box {
            width: 100%;
            height: 132rpx;
            margin-top: 30rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding-left: 30rpx;
            margin-bottom: 48rpx;

            .tx_box {
                width: 132rpx;
                height: 132rpx;
                border-radius: 50%;
                background-color: rgba(177, 199, 189, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 24rpx;

                .ty_pic {
                    width: 75%;
                    height: 75rpx;
                }

                .zs_pic {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .head_right_box {
                width: 430rpx;
                height: 131rpx;

                .top_head_r_b {
                    width: 100%;
                    height: 80rpx;
                    margin-bottom: 8rpx;
                    font-size: 32rpx;
                    font-weight: 600;
                    line-height: 100rpx;
                    color: rgba(0, 0, 0, 1);
                }

                .bot_head_r_b {
                    width: 100%;
                    height: 34rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    line-height: 34rpx;
                    color: rgba(128, 128, 128, 1);
                }
            }

            .shezhibox {
                width: 50rpx;

                image {
                    width: 100%;
                }


            }
        }

        .wallet_box {
            width: 704rpx;
            height: 244rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            padding: 40rpx 30rpx 0 30rpx;
            margin-bottom: 22rpx;

            .dingdan_top_box {
                width: 100%;
                height: 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 28rpx;

                .left_box {
                    height: 30rpx;
                    opacity: 1;
                    font-size: 30rpx;
                    font-weight: 600;
                    line-height: 30rpx;
                    color: rgba(51, 51, 51, 1);

                }

                .rt_box {
                    height: 24rpx;
                    opacity: 1;
                    font-size: 24rpx;
                    font-weight: 500;
                    line-height: 24rpx;
                    color: rgba(153, 153, 153, 1);
                }
            }

            .ddyemian_box {
                width: 100%;
                height: 110rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .dd_big_box {
                    height: 110rpx;
                    width: 80rpx;
                    margin-right: 56rpx;

                    .ddtop_box {
                        width: 72rpx;
                        height: 72rpx;
                        margin-bottom: 20rpx;
                        position: relative;

                        image {
                            width: 52rpx;
                            height: 52rpx;
                            display: block;
                            margin: auto;
                        }

                        .jiaobiao {
                            position: absolute;
                            top: -12rpx;
                            right: -6rpx;
                            width: 32rpx;
                            height: 32rpx;
                            opacity: 1;
                            border-radius: 50%;
                            background: red;
                            border: 2rpx solid rgba(255, 255, 255, 1);
                            text-align: center;
                            line-height: 27rpx;
                            font-size: 20rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);

                            &.jiaobiao1_box {
                                width: 50rpx;
                                height: 32rpx;
                                opacity: 1;
                                border-radius: 30rpx;
                            }
                        }
                    }

                    .ddbot_box {
                        width: 80rpx;
                        height: 24rpx;
                        opacity: 1;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 24rpx;
                        color: rgba(56, 56, 56, 1);
                        text-align: center;

                    }
                }
            }
        }

        .help_box {
            width: 704rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            padding: 50rpx 0;

            .help_title_box {
                height: 48rpx;
                font-size: 32rpx;
                font-weight: 600;
                line-height: 48rpx;
                color: rgba(0, 0, 0, 1);
                margin-bottom: 42rpx;

            }


            .big_gn_box {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                box-sizing: border-box;
                padding: 0 10rpx;

                .gn_box {
                    // height: 88rpx;
                    width: 23%;
                    flex-shrink: 0;
                    // margin-bottom: 21rpx;
                    position: relative;
                    .jiaobiao {
                            position: absolute;
                            top: -12rpx;
                            right: 18rpx;
                            width: 32rpx;
                            height: 32rpx;
                            opacity: 1;
                            border-radius: 50%;
                            background: rgba(255, 141, 26, 1);
                            border: 2rpx solid rgba(255, 255, 255, 1);
                            text-align: center;
                            line-height: 27rpx;
                            font-size: 20rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);

                            &.jiaobiao1_box {
                                width: 50rpx;
                                height: 32rpx;
                                opacity: 1;
                                border-radius: 30rpx;
                            }
                        }
                    .gn_t_box {
                        width: 52rpx;
                        height: 52rpx;
                        margin: auto;
                        margin-bottom: 26rpx;


                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .gn_b_box {
                        width: 100%;
                        height: 38rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 38rpx;
                        color: rgba(56, 56, 56, 1);
                        text-align: center;
                    }
                }
            }

        }
    }
}
</style>